<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>姓名:{{ studentName }}</h2>
    <h2>年龄:{{ myAge + 1 }}</h2>
    <h2>性别:{{ sex }}</h2>
    <button @click="updateAge">点我修改年龄</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data() {
    return {
      msg: '展示人员信息',
      myAge: this.age,
    }
  },
  methods: {
    updateAge() {
      this.myAge++
    },
  },
  //简单声明接收，里面的属性不能修改
  props: ['studentName', 'age', 'sex'],
  //接收并对类型进行限制
  // props: {
  //   studentName: String,
  //   age: Number,
  //   sex: String,
  // },
  //接收数据的同时：对类型的限制、对必要性的限制、对默认值的设置
  // props: {
  //   studentName: {
  //     type: String,
  //     required: true,
  //   },
  //   age: {
  //     type: Number,
  //     required: false,
  //   },
  //   sex: {
  //     type: String,
  //     default: 'male',
  //   },
  // },
}
</script>

<style></style>
